$(function () {
  // 下拉框
  // 对所有下拉款进行初始化
  let colors = ['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379']
  $(".time").M_select({
    // 手动添加下拉款图片（以html页面为起始位置写路径）
    "Img": "../../plugin/M_select/js/M_select/up4.png",
    "Img2": "../../plugin/M_select/js/M_select/down4.png",
    "radius": "4px",
    "Title": "选择日期",
    "inputName": "selected_value",
    // 默认选中的值（参数值写需要选中的select的value值）
    "selected": "03",
    Succee: function () {
      site = $('#select-time').val()
      console.log(site)
    }
  });

  // 点击事件

  $('.change-box li').click(function () {
    $(this).addClass('active').siblings('li').removeClass('active')
    let index = $(this).index()
    $(this).parents('.change-box').siblings('.all-chart-box').children().eq(index).removeClass('chart-hd').siblings().addClass('chart-hd')
  })
  function myChart5_1_1() {
    var myChart = echarts.init(document.getElementById('chart5-1-1'));
    option = {
      title: {
        text: '68%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#fff',
          fontSize: '18'
        },

      },
      color: ['rgba(255, 255, 255, .2)'],

      series: [{
        name: 'Line 1',
        type: 'pie',
        clockWise: false,
        radius: ['60%', '90%'],
        center: ['50%', '50%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [{
          value: 68,
          name: '已使用',
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: colors[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: colors[0] // 100% 处的颜色
                }]
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          }
        }, {
          name: '未使用',
          value: 20
        }]
      }]
    };

    myChart.setOption(option);

  }
  function myChart5_1_2() {
    var myChart = echarts.init(document.getElementById('chart5-1-2'));
    option = {
      title: {
        text: '113862人',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#fff',
          fontSize: '14'
        },

      },
      color: ['rgba(255, 255, 255, .2)'],

      series: [{
        name: 'Line 1',
        type: 'pie',
        clockWise: false,
        radius: ['60%', '90%'],
        center: ['50%', '50%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [{
          value: 38,
          name: '已使用',
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color:colors[1] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: colors[1] // 100% 处的颜色
                }]
              },
              label: {
                show: false

              },
              labelLine: {
                show: false
              }
            }
          }
        }, {
          name: '未使用',
          value: 40
        }]
      }]
    };

    myChart.setOption(option);

  }
  function myChart5_1_3() {
    var myChart = echarts.init(document.getElementById('chart5-1-3'));
    option = {
      title: {
        text: '28%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#fff',
          fontSize: '18'
        },

      },
      color: ['rgba(255, 255, 255, .2)'],

      series: [{
        name: 'Line 1',
        type: 'pie',
        clockWise: false,
        radius: ['60%', '90%'],
        center: ['50%', '50%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [{
          value: 28,
          name: '已使用',
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: colors[2] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: colors[2] // 100% 处的颜色
                }]
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          }
        }, {
          name: '未使用',
          value: 80
        }]
      }]
    };

    myChart.setOption(option);

  }
  function myChart5_1_4() {
    var myChart = echarts.init(document.getElementById('chart5-1-4'));
    option = {
      title: {
        text: '18%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#fff',
          fontSize: '18'
        },

      },
      color: ['rgba(255, 255, 255, .2)'],

      series: [{
        name: 'Line 1',
        type: 'pie',
        clockWise: false,
        radius: ['60%', '90%'],
        center: ['50%', '50%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [{
          value: 18,
          name: '已使用',
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: colors[3] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: colors[3] // 100% 处的颜色
                }]
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          }
        }, {
          name: '未使用',
          value: 82
        }]
      }]
    };

    myChart.setOption(option);

  }
  function myChart5_2() {
    var myChart = echarts.init(document.getElementById('chart5-2'));
    var option = {
      tooltip: {
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '13%',
        top: '5%',
        containLabel: true
      },
      legend: {
        data: ['本周', '上周'],
        bottom: '0',
        x: 'center',
        textStyle: {
          color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        type: 'category',
        data: ['8-22', '8-23', '8-24', '8-25', '8-26', '8-27', '8-28'],
        axisLine: {
          lineStyle: {
            color: '#fff'

          }
        },
        axisLabel: {
          margin: 8,
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            color: "#fff",
            fontSize: 12,
          }
        },
        axisTick: {
          show: false
        }
      },

      yAxis: {
        type: 'value',
        interval: 50,
        max: 400,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'white'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)'
          }
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        axisTick: {
          show: false
        }
      },
      series: [{
        name: '本周',
        type: 'bar',
        barWidth: '12',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(98,145,242)'
          },
          {
            offset: 1,
            color: 'rgb(10,41,190)'
          }
          ], false),
        },
        data: [260, 300, 350, 270, 340, 330, 210]
      },
      {
        name: '上周',
        type: 'bar',
        barWidth: '12',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(47,230,252)'
            },
            {
              offset: 1,
              color: 'rgb(40,97,214)'
            }
            ], false),
          }

        },
        data: [230, 260, 310, 260, 280, 370, 270]
      }]
    };
    myChart.setOption(option);
  }
  function myChart5_3() {
    var myChart = echarts.init(document.getElementById('chart5-3'));
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B'
          }
        }
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['今天', '昨天'],
        right: '4%',
        textStyle: {
          fontSize: 12,
          color: '#fff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 3,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },
        data: ['07', '08', '09', '10', '12', '13', '14', '15', '16', '17', '18', '19', '20']
      }],
      yAxis: [{
        type: 'value',
        max: 1800,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#57617B'
          }
        }
      }],
      series: [{
        name: '今天',
        type: 'line',
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },

        data: [100, 200, 600, 1000, 1200, 1500, 1600, 1400, 1000, 800, 400, 100, 80, 0]
      }, {
        name: '昨天',
        type: 'line',
        symbol: 'none',
                  smooth: true,
                  symbolSize: 5,
                  showSymbol: false,
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: ' rgba(13,241,222,0.50196)'
                      }, {
                        offset: 0.3,
                        color: 'rgba(13,241,222,0.10196)'
                      }, {
                        offset: 1,
                        color: 'rgba(13,241,222,0)'
                      }], false),
                    },
                  },
                  itemStyle: {
                    color: "rgba(13,241,222,0.50196)"
                  },

        data: [200, 400, 600, 800, 1000, 1200, 1250, 1000, 600, 400, 200, 100, 80, 0]
      }]
    };
    myChart.setOption(option);
  }
  function myChart5_4_1() {
    var myChart = echarts.init(document.getElementById('chart5-4-1'));
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
          animation: false,
          label: {
            backgroundColor: '#505765'
          }
        }
      },
      grid: {
        left: '12%',
        top: '18%',
        bottom: '15%',
        right: '12%',
      },
      legend: {
        data: ['客流量', '增长率'],
        top: '0',
        right: '0',
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          fontSize: '12',
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#ccc',
            margin: 2
          },
          axisTick: {
            show: false
          },
          data: [
            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
          ]
        }
      ],
      yAxis: [

        {
          type: 'value',
          max: 180,
          // splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLabel: {
            color: '#ccc'
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        },
        {
          // nameLocation: 'start',
          max: 60,
          min: -20,
          // splitNumber: 8,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLabel: {
            formatter: '{value}% ',
            color: '#ccc'
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '客流量',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#28D8E8' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#0489F0' // 100% 处的颜色
              }], false),
            }
          },
          data: [
            130, 155, 100, 140, 130, 120, 125, 135, 140, 165, 115, 110
          ],
        },
        {
          name: '增长率',
          type: 'line',
          yAxisIndex: 1,
          data: [
            -10, 13, 10, 33, 25, 8, 12, 20, 28, 32, 18, 10
          ],
          smooth: false, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#407FFF"
          },
          lineStyle: {
            color: "#407FFF"
          },
        }
      ]
    };
    myChart.setOption(option);

  }
  function myChart5_4_2() {
    var myChart = echarts.init(document.getElementById('chart5-4-2'));
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
          animation: false,
          label: {
            backgroundColor: '#505765'
          }
        }
      },
      grid: {
        left: '12%',
        top: '18%',
        bottom: '15%',
        right: '12%',
      },
      legend: {
        data: ['客流量', '增长率'],
        top: '0',
        right: '0',
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          fontSize: '12',
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#ccc',
            margin: 2
          },
          axisTick: {
            show: false
          },
          data: [
            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
          ]
        }
      ],
      yAxis: [

        {
          type: 'value',
          max: 180,
          // splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLabel: {
            color: '#ccc'
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        },
        {
          // nameLocation: 'start',
          max: 60,
          min: -20,
          // splitNumber: 8,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLabel: {
            formatter: '{value}% ',
            color: '#ccc'
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '客流量',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(47,230,252)'
              },
              {
                offset: 1,
                color: 'rgb(40,97,214)'
              }
              ], false),
            }
          },
          data: [
            130, 165, 100, 135, 130, 150, 120, 135, 130, 165, 135, 110
          ],
        },
        {
          name: '增长率',
          type: 'line',
          yAxisIndex: 1,
          data: [
            -10, 23, 10, 18, 25, 20, 22, 20, 22, 32, 25, 10
          ],
          symbol: 'none',
          smooth: true,
          symbolSize: 5,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: ' rgba(13,241,222,0.50196)'
              }, {
                offset: 0.3,
                color: 'rgba(13,241,222,0.10196)'
              }, {
                offset: 1,
                color: 'rgba(13,241,222,0)'
              }], false),
            },
          },
          itemStyle: {
            color: "rgba(13,241,222,0.50196)"
          },
        }
      ]
    };
    myChart.setOption(option);

  }
  function myChart5_4_3() {
    var myChart = echarts.init(document.getElementById('chart5-4-3'));
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
          animation: false,
          label: {
            backgroundColor: '#505765'
          }
        }
      },
      grid: {
        left: '12%',
        top: '18%',
        bottom: '15%',
        right: '12%',
      },
      legend: {
        data: ['客流量', '增长率'],
        top: '0',
        right: '0',
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          fontSize: '12',
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#ccc',
            margin: 2
          },
          axisTick: {
            show: false
          },
          data: [
            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
          ]
        }
      ],
      yAxis: [

        {
          type: 'value',
          max: 180,
          // splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLabel: {
            color: '#ccc'
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        },
        {
          // nameLocation: 'start',
          max: 60,
          min: -20,
          // splitNumber: 8,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLabel: {
            formatter: '{value}% ',
            color: '#ccc'
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '客流量',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#28D8E8' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#0489F0' // 100% 处的颜色
              }], false),
            }
          },
          data: [
            130, 155, 100, 120, 130, 140, 120, 135, 130, 165, 115, 110
          ],
        },
        {
          name: '增长率',
          type: 'line',
          yAxisIndex: 1,
          data: [
            -10, 13, 10, 23, 25, 12, 22, 20, 22, 32, 18, 10
          ],
          smooth: false, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: "none", //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: ' rgba(13,241,222,0.50196)'
              }, {
                offset: 0.3,
                color: 'rgba(13,241,222,0.10196)'
              }, {
                offset: 1,
                color: 'rgba(13,241,222,0)'
              }], false),
            },
          },
          itemStyle: {
            color: "rgba(13,241,222,0.50196)"
          },
        }
      ]
    };
    myChart.setOption(option);

  }
  myChart5_1_1();
  myChart5_1_2();
  myChart5_1_3();
  myChart5_1_4();
  myChart5_2();
  myChart5_3();
  myChart5_4_1();
  myChart5_4_2();
  myChart5_4_3();

  // 百度地图API功能
  var map = new BMap.Map("mapall");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(112.961054, 34.520037), 12);  // 初始化地图,设置中心点坐标和地图级别
  //添加地图类型控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes: [
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
    ]
  }));
  map.setCurrentCity("嵩山少林寺");          // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  var point = new BMap.Point(116.418261, 39.921984);
  // map.centerAndZoom(point, 15);             // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(); // 允许滚轮缩放
    map.setMapStyle({style: 'midnight'})
    //默认地图样式(normal)
    //清新蓝风格(light)
    //黑夜风格(dark)
    //清新蓝绿风格(bluish)
    //高端灰风格(grayscale)
    //强边界风格(hardedge)
    //青春绿风格(darkgreen)
    //浪漫粉风格(pink)
    //午夜蓝风格(midnight)
    //自然绿风格(grassgreen)
    //精简风格(googlelite)
    //红色警戒风格(redalert)
  var points14 = [
    { "lng": 112.935708, "lat": 34.469893, "count": 98 },
    { "lng": 112.958418, "lat": 34.479892, "count": 100 },
    { "lng": 112.942607, "lat": 34.49584, "count": 90 },
    { "lng": 112.951806, "lat": 34.508216, "count": 80 },
    { "lng": 113.034019, "lat": 34.509405, "count": 98 },
    { "lng": 113.033444, "lat": 34.511071, "count": 100 },
    { "lng": 113.055291, "lat": 34.511785, "count": 90 },
    { "lng": 113.048967, "lat": 34.502504, "count": 98 },
    { "lng": 113.082024, "lat": 34.508929, "count": 80 },
    { "lng": 113.081737, "lat": 34.495364, "count": 100 },
    { "lng": 113.080875, "lat": 34.473464, "count": 80 },
    { "lng": 113.053854, "lat": 34.480368, "count": 100 },
    { "lng": 112.900351, "lat": 34.456321, "count": 80 },
    { "lng": 112.933121, "lat": 34.477749, "count": 90 },
    { "lng": 112.947782, "lat": 34.475845, "count": 90 },
    { "lng": 112.906675, "lat": 34.46275, "count": 80 },
    { "lng": 112.939158, "lat": 34.515592, "count": 98 },
    { "lng": 112.954579, "lat": 34.51663, "count": 90 },
    { "lng": 112.961054, "lat": 34.520037, "count": 98 },
    { "lng": 113.021361, "lat": 34.519929, "count": 98 },
    { "lng": 112.938296, "lat": 34.516306, "count": 90 },
    { "lng": 112.989176, "lat": 34.498696, "count": 80 },
    { "lng": 112.986014, "lat": 34.5263, "count": 80 },
    { "lng": 112.948644, "lat": 34.450844, "count": 80 },
    { "lng": 113.044367, "lat": 34.515711, "count": 90 },
  ];
  var points13 = [
    { "lng": 112.935708, "lat": 34.469893, "count": 98 },
    { "lng": 112.958418, "lat": 34.479892, "count": 100 },
    { "lng": 113.021361, "lat": 34.519929, "count": 98 },
    { "lng": 112.938296, "lat": 34.516306, "count": 90 },
    { "lng": 112.989176, "lat": 34.498696, "count": 80 },
    { "lng": 112.986014, "lat": 34.5263, "count": 80 },
    { "lng": 112.948644, "lat": 34.450844, "count": 80 },
    { "lng": 113.044367, "lat": 34.515711, "count": 90 },
    { "lng": 113.021361, "lat": 34.519929, "count": 98 },
    { "lng": 112.938296, "lat": 34.516306, "count": 90 },
    { "lng": 112.989176, "lat": 34.498696, "count": 80 },
    { "lng": 112.986014, "lat": 34.5263, "count": 80 },
    { "lng": 112.948644, "lat": 34.450844, "count": 80 },
    { "lng": 113.044367, "lat": 34.515711, "count": 90 },
  ];
  var points12 = [
    { "lng": 112.935708, "lat": 34.469893, "count": 98 },
    { "lng": 112.986014, "lat": 34.5263, "count": 80 },
    { "lng": 112.948644, "lat": 34.450844, "count": 80 },
    { "lng": 113.044367, "lat": 34.515711, "count": 90 },
    { "lng": 112.906675, "lat": 34.46275, "count": 80 },
    { "lng": 112.939158, "lat": 34.515592, "count": 98 },
    { "lng": 112.954579, "lat": 34.51663, "count": 90 },
    { "lng": 112.961054, "lat": 34.520037, "count": 98 },
    { "lng": 113.021361, "lat": 34.519929, "count": 98 },
    { "lng": 112.938296, "lat": 34.516306, "count": 90 },
    { "lng": 112.989176, "lat": 34.498696, "count": 80 },
  ];
  var points11 = [
    { "lng": 112.935708, "lat": 34.469893, "count": 98 },
    { "lng": 112.986014, "lat": 34.5263, "count": 80 },
    { "lng": 112.948644, "lat": 34.450844, "count": 80 },
    { "lng": 113.044367, "lat": 34.515711, "count": 90 },
    { "lng": 112.954579, "lat": 34.51663, "count": 90 },
    { "lng": 112.961054, "lat": 34.520037, "count": 98 },
  ];
  var points10 = [
    { "lng": 112.935708, "lat": 34.469893, "count": 98 },
    { "lng": 112.986014, "lat": 34.5263, "count": 80 },
    { "lng": 112.906675, "lat": 34.46275, "count": 80 },

  ];


  if (!isSupportCanvas()) {
    alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
  }
  //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
  //参数说明如下:
	/* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
			.2:'rgb(0, 255, 255)',
			.5:'rgb(0, 110, 255)',
			.8:'rgb(100, 0, 255)'
		}
		其中 key 表示插值的位置, 0~1.
		    value 为颜色值.
     */
  heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
  map.addOverlay(heatmapOverlay);
  // heatmapOverlay.setDataSet({ data: points2, max: 100 });
  //是否显示热力图
  function openHeatmap(data) {
    heatmapOverlay.show();
    heatmapOverlay.setDataSet({ data: data, max: 100 });
  }

  function closeHeatmap() {
    heatmapOverlay.hide();
  }

  function setGradient() {
    /*格式如下所示:
 {
     0:'rgb(102, 255, 0)',
     .5:'rgb(255, 170, 0)',
     1:'rgb(255, 0, 0)'
 }*/
    var gradient = {};
    var colors = document.querySelectorAll("input[type='color']");
    colors = [].slice.call(colors, 0);
    colors.forEach(function (ele) {
      gradient[ele.getAttribute("data-key")] = ele.value;
    });
    heatmapOverlay.setOption({ "gradient": gradient })
  }
  // 判断浏览器是否支持canvas
  function isSupportCanvas() {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'))
  }
  openHeatmap(points14)
  // 点击切换热力图
  $('.time-list-box>div').click(function () {
    $(this).addClass('active').siblings().removeClass('active')
    switch ($(this).children('span').text()) {
      case '14':
        openHeatmap(points14)
        return;
      case '13':
        openHeatmap(points13)
        return;
      case '12':
        openHeatmap(points12)
        return;
      case '11':
        openHeatmap(points11)
        return;
      case '10':
        openHeatmap(points10)
        return;
    }

  })
})
